<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>京东左侧导航栏</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        body {
            background-color: #bfa;
        }

        .left-nav {
            width: 190px;
            height: 450px;
            padding: 10px 0;
            background-color: #fff;
            margin: 50px auto;
        }

        .left-nav .item {
            height: 25px;
            /*垂直居中*/
            line-height: 25px;
            padding-left: 18px;
            font-size: 12px;
        }

        .item:hover {
            background-color: #d9d9d9;
        }

        /*设置超链接样式*/
        .item a {
            color: #333;
            /*去除下划线*/
            text-decoration: none;
            font-size: 14px;
        }

        /*鼠标移动到超链接上改变其颜色*/
        .item a:hover {
            color: #c81623;
        }
    </style>
</head>

<body>
    <nav>
        <div class="left-nav">
            <div class="item">
                <a href="#">家用电器</a>
            </div>
            <div class="item">
                <a href="#">手机</a>/
                <a href="#">运营商</a>/
                <a href="#">数码</a>
            </div>
            <div class="item">
                <a href="#">电脑</a>/
                <a href="#">办公</a>
            </div>
            <div class="item">
                <a href="#">家具</a>/
                <a href="#">家居</a>/
                <a href="#">家装</a>/
                <a href="#">厨具</a>
            </div>
            <div class="item">
                <a href="#">男装</a>/
                <a href="#">女装</a>/
                <a href="#">童装</a>/
                <a href="#">内衣</a>
            </div>
            <div class="item">
                <a href="#">美妆</a>/
                <a href="#">个人清洁</a>/
                <a href="#">宠物</a>
            </div>
            <div class="item">
                <a href="#">女鞋</a>/
                <a href="#">箱包</a>/
                <a href="#">钟表</a>/
                <a href="#">珠宝</a>
            </div>
            <div class="item">
                <a href="#">男鞋</a>/
                <a href="#">运动</a>/
                <a href="#">户外</a>
            </div>

        </div>
    </nav>
</body>

</html>